import { Area, Column, Pie } from "@ant-design/charts";
import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  DownloadOutlined,
  ReloadOutlined,
} from "@ant-design/icons";
import { ProCard, StatisticCard } from "@ant-design/pro-components";
import {
  Badge,
  Button,
  Card,
  Col,
  Dropdown,
  Radio,
  Row,
  Segmented,
  Space,
  Table,
  Typography,
} from "antd";

import React, { useState } from "react";

import "./index.less";

const { Title, Paragraph } = Typography;

interface DataItem {
  date: string;
  value: number;
  category: string;
}

interface TableDataItem {
  key: string;
  name: string;
  status: string;
  date: string;
  progress: number;
  amount: number;
}

const Page40: React.FC = () => {
  const [timeRange, setTimeRange] = useState<string>("week");
  const [chartType, setChartType] = useState<string>("area");

  // 模拟数据
  const generateChartData = (): DataItem[] => {
    const categories = ["类别A", "类别B", "类别C", "类别D"];
    const data: DataItem[] = [];

    for (let i = 1; i <= 30; i++) {
      categories.forEach((category) => {
        data.push({
          date: `2023-11-${i < 10 ? "0" + i : i}`,
          value: Math.floor(Math.random() * 1000) + 100,
          category,
        });
      });
    }

    return data;
  };

  const chartData = generateChartData();

  // 饼图数据
  const pieData = [
    { type: "类别A", value: 27 },
    { type: "类别B", value: 25 },
    { type: "类别C", value: 18 },
    { type: "类别D", value: 15 },
    { type: "类别E", value: 10 },
    { type: "其他", value: 5 },
  ];

  // 表格数据
  const tableData: TableDataItem[] = [
    {
      key: "1",
      name: "项目A",
      status: "success",
      date: "2023-11-15",
      progress: 100,
      amount: 12850,
    },
    {
      key: "2",
      name: "项目B",
      status: "processing",
      date: "2023-11-18",
      progress: 75,
      amount: 9580,
    },
    {
      key: "3",
      name: "项目C",
      status: "warning",
      date: "2023-11-20",
      progress: 35,
      amount: 6500,
    },
    {
      key: "4",
      name: "项目D",
      status: "error",
      date: "2023-11-22",
      progress: 0,
      amount: 3200,
    },
    {
      key: "5",
      name: "项目E",
      status: "success",
      date: "2023-11-25",
      progress: 100,
      amount: 15000,
    },
  ];

  // 表格列定义
  const columns = [
    {
      title: "项目名称",
      dataIndex: "name",
      key: "name",
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status: string) => {
        const statusMap = {
          success: { text: "已完成", status: "success" },
          processing: { text: "进行中", status: "processing" },
          warning: { text: "警告", status: "warning" },
          error: { text: "错误", status: "error" },
        };
        const { text, status: badgeStatus } =
          statusMap[status as keyof typeof statusMap];
        return <Badge status={badgeStatus as any} text={text} />;
      },
    },
    {
      title: "日期",
      dataIndex: "date",
      key: "date",
    },
    {
      title: "进度",
      dataIndex: "progress",
      key: "progress",
      render: (progress: number) => `${progress}%`,
    },
    {
      title: "金额",
      dataIndex: "amount",
      key: "amount",
      render: (amount: number) => `¥${amount.toLocaleString()}`,
    },
  ];

  // 图表配置
  const areaConfig = {
    data: chartData,
    xField: "date",
    yField: "value",
    seriesField: "category",
    smooth: true,
    animation: true,
    legend: {
      position: "top-right" as const,
    },
    xAxis: {
      type: "time" as const,
    },
  };

  const columnConfig = {
    data: chartData.filter(
      (item) =>
        item.date.endsWith("5") ||
        item.date.endsWith("0") ||
        item.date.endsWith("1"),
    ),
    isGroup: true,
    xField: "date",
    yField: "value",
    seriesField: "category",
    animation: true,
    legend: {
      position: "top-right" as const,
    },
  };

  const pieConfig = {
    data: pieData,
    angleField: "value",
    colorField: "type",
    radius: 0.8,
    label: {
      type: "outer",
      content: "{name} {percentage}",
    },
    interactions: [{ type: "pie-legend-active" }, { type: "element-active" }],
  };

  return (
    <div className="dashboard-page">
      <div className="page-header">
        <Title level={2} className="page-title">
          高级数据可视化仪表盘
        </Title>
        <Paragraph className="page-description">
          全面的数据分析与可视化平台，实时监控业务指标和趋势
        </Paragraph>
      </div>

      <Row gutter={[24, 24]} className="stat-cards">
        <Col xs={24} sm={12} md={12} lg={6}>
          <ProCard className="stat-card">
            <StatisticCard
              statistic={{
                title: "总销售额",
                value: 126500,
                precision: 0,
                prefix: "¥",
                description: (
                  <Space>
                    <ArrowUpOutlined style={{ color: "#52c41a" }} />
                    <span>同比增长16.8%</span>
                  </Space>
                ),
              }}
              chart={
                <img
                  src="https://gw.alipayobjects.com/zos/alicdn/zevpN7Nv_/xiaozhexiantu.svg"
                  alt="折线图"
                  width={60}
                />
              }
              chartPlacement="right"
            />
          </ProCard>
        </Col>
        <Col xs={24} sm={12} md={12} lg={6}>
          <ProCard className="stat-card">
            <StatisticCard
              statistic={{
                title: "访问量",
                value: 8846,
                description: (
                  <Space>
                    <ArrowUpOutlined style={{ color: "#52c41a" }} />
                    <span>周同比增长12.5%</span>
                  </Space>
                ),
              }}
              chart={
                <img
                  src="https://gw.alipayobjects.com/zos/alicdn/zevpN7Nv_/xiaozhexiantu.svg"
                  alt="折线图"
                  width={60}
                />
              }
              chartPlacement="right"
            />
          </ProCard>
        </Col>
        <Col xs={24} sm={12} md={12} lg={6}>
          <ProCard className="stat-card">
            <StatisticCard
              statistic={{
                title: "订单量",
                value: 1284,
                description: (
                  <Space>
                    <ArrowDownOutlined style={{ color: "#f5222d" }} />
                    <span>周同比下降8.4%</span>
                  </Space>
                ),
              }}
              chart={
                <img
                  src="https://gw.alipayobjects.com/zos/alicdn/zevpN7Nv_/xiaozhexiantu.svg"
                  alt="折线图"
                  width={60}
                />
              }
              chartPlacement="right"
            />
          </ProCard>
        </Col>
        <Col xs={24} sm={12} md={12} lg={6}>
          <ProCard className="stat-card">
            <StatisticCard
              statistic={{
                title: "转化率",
                value: 38.2,
                precision: 1,
                suffix: "%",
                description: (
                  <Space>
                    <ArrowUpOutlined style={{ color: "#52c41a" }} />
                    <span>周同比增长5.6%</span>
                  </Space>
                ),
              }}
              chart={
                <img
                  src="https://gw.alipayobjects.com/zos/alicdn/zevpN7Nv_/xiaozhexiantu.svg"
                  alt="折线图"
                  width={60}
                />
              }
              chartPlacement="right"
            />
          </ProCard>
        </Col>
      </Row>

      <Row gutter={[24, 24]}>
        <Col xs={24} lg={16}>
          <div className="chart-container">
            <div className="chart-header">
              <div className="chart-title">销售趋势分析</div>
              <Space>
                <Radio.Group
                  value={timeRange}
                  onChange={(e) => setTimeRange(e.target.value)}
                >
                  <Radio.Button value="day">日</Radio.Button>
                  <Radio.Button value="week">周</Radio.Button>
                  <Radio.Button value="month">月</Radio.Button>
                  <Radio.Button value="year">年</Radio.Button>
                </Radio.Group>
                <Segmented
                  value={chartType}
                  onChange={(value) => setChartType(value as string)}
                  options={[
                    { label: "面积图", value: "area" },
                    { label: "柱状图", value: "column" },
                  ]}
                />
                <Dropdown
                  menu={{
                    items: [
                      { key: "1", label: "导出数据" },
                      { key: "2", label: "刷新数据" },
                      { key: "3", label: "打印图表" },
                    ],
                  }}
                >
                  <Button icon={<DownloadOutlined />} />
                </Dropdown>
                <Button icon={<ReloadOutlined />} />
              </Space>
            </div>
            <div className="chart-content">
              {chartType === "area" ? (
                <Area {...areaConfig} />
              ) : (
                <Column {...columnConfig} />
              )}
            </div>
          </div>
        </Col>
        <Col xs={24} lg={8}>
          <div className="chart-container">
            <div className="chart-header">
              <div className="chart-title">销售分布</div>
              <Button icon={<ReloadOutlined />} />
            </div>
            <div className="chart-content">
              <Pie {...pieConfig} />
            </div>
          </div>
        </Col>
      </Row>

      <Row gutter={[24, 24]}>
        <Col span={24}>
          <div className="table-container">
            <div className="table-header">
              <div className="table-title">项目进度</div>
              <Space>
                <Button type="primary">添加项目</Button>
                <Button>导出数据</Button>
              </Space>
            </div>
            <Table
              columns={columns}
              dataSource={tableData}
              pagination={false}
            />
          </div>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: 24 }}>
        <Col span={24}>
          <ProCard
            tabs={{
              type: "card",
              activeKey: "tab1",
              items: [
                {
                  label: "实时监控",
                  key: "tab1",
                  children: (
                    <Row gutter={[16, 16]}>
                      <Col span={8}>
                        <Card className="metric-card">
                          <div className="metric-title">CPU使用率</div>
                          <div className="metric-value">42%</div>
                          <div className="metric-footer">
                            <ArrowUpOutlined style={{ marginRight: 4 }} />
                            较昨日增长5%
                          </div>
                        </Card>
                      </Col>
                      <Col span={8}>
                        <Card
                          className="metric-card"
                          style={{
                            background:
                              "linear-gradient(135deg, #52c41a 0%, #389e0d 100%)",
                          }}
                        >
                          <div className="metric-title">内存使用</div>
                          <div className="metric-value">3.2 GB</div>
                          <div className="metric-footer">
                            <ArrowDownOutlined style={{ marginRight: 4 }} />
                            较昨日减少2%
                          </div>
                        </Card>
                      </Col>
                      <Col span={8}>
                        <Card
                          className="metric-card"
                          style={{
                            background:
                              "linear-gradient(135deg, #722ed1 0%, #531dab 100%)",
                          }}
                        >
                          <div className="metric-title">网络流量</div>
                          <div className="metric-value">1.8 MB/s</div>
                          <div className="metric-footer">
                            <ArrowUpOutlined style={{ marginRight: 4 }} />
                            较昨日增长12%
                          </div>
                        </Card>
                      </Col>
                    </Row>
                  ),
                },
                {
                  label: "性能分析",
                  key: "tab2",
                  children: "性能分析内容",
                },
                {
                  label: "系统日志",
                  key: "tab3",
                  children: "系统日志内容",
                },
              ],
            }}
          />
        </Col>
      </Row>
    </div>
  );
};

export default Page40;
